<template>
  <div class="signClander" @mouseenter="show" @mouseleave="hide">
    <!-- 签到按钮 -->
    <div :class="{ 'sec-qiandao': !isSign, 'sec-qiandaole': isSign }">
      <a
        @click="sign"
        v-if="!isSign"
        href="javascript:void(0)"
        class="sec-checkin"
      >
        <i class="el-icon-edit-outline"></i>&nbsp;签到
      </a>
      <a v-else href="javascript:void(0)" class="sec-checkined">
        <i class="el-icon-circle-check"></i>&nbsp;已签到
      </a>
      <span class="qiandao-num f14">
        今日签到人数
        <br />
        <span class="qd-number">{{ signTotal }}</span>
        人
      </span>
    </div>
    <!-- 签到日期框默认隐藏 -->
    <div class="qd-data-box">
      <transition name="fade">
        <div class="qd-date-child" v-show="flag">
          <vue-better-calendar
            mode="sign"
            ref="calendar"
            :signed-dates="signedDates"
            @select-sign-date="selectSign"
            :labelToday="{ showLabelToday: false, label: '今天' }"
          >
          </vue-better-calendar>
          <p class="qd-all-day acenter f14">
            已经连续签到<span>{{ tbSign.continue_sign }}</span
            >天了呦
          </p>
          <p class="acenter f10">
            每天签到奖励<span>1</span>个K币
          </p>
          <p class="acenter f10">
            连续签到<span>15</span>天后，每次签到奖励<span>2</span>个K币
          </p>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      isSign: true,
      // 签到日期数组
      signedDates: [],
      tbSign: {},
      signTotal: 0
    }
  },
  methods: {
    show() {
      this.flag = true
    },
    hide() {
      this.flag = false
    },
    async selectSign(signInfo) {
      console.log(signInfo)
      /* signInfo.status 判断签到是否为当天
       *  signInfo.msg 本次是否签到成功的提示语
       *  signInfo.signedDates 本次签到后目前所有已签到的日期集合
       */
      if (signInfo.status) {
        const { data: res } = await this.$http.post('doSign.calc', {
          uid: this.$store.state.uid
        })
        // 签到成功后
        // this.signedDates = signInfo.signedDates
        if (this.tbSign.continue_sign >= 15) kb = 2
        let kb = 1
        const kbres = await this.$store.dispatch('setKbCount', {
          uid: this.$store.state.uid,
          operaname: '签到',
          detail: '通过签到获取的K币',
          changekb: kb
        })
        if(kbres.code!=='200') return this.$message.error(kbres.data)
        this.$message.success({ message: '签到成功,k币+'+kb, offset: 250 })
        this.getTotalSign()
        this.getSign()
      } else {
        /* 需要在当天才能签到的提示，有如下三个属性可设置提示内容
         * notSignInOtherMonthsTxt，签到时点击本月外日期时的文本提示，默认值为“不能在本月外进行签到”
         * notSignInOtherDaysTxt，签到时点击本月内非当天日期时的文本提示，默认值为“notSignInOtherDaysTxt”
         * alreadySignTxt，签到时点击已经签过到的日期时的文本提示，默认值为“本日已经进行过签到”
         */
        // alert(signInfo.msg)
      }
    },
    sign() {
      this.$refs.calendar.sign()
    },
    async getSign() {
      const { data: res } = await this.$http.post('getSign.calc', {
        uid: this.$store.state.uid
      })
      if (res.code !== '200') return this.$message.error('获取签到数据失败')
      this.signedDates = res.data.signList
      this.tbSign = res.data
      this.isSign = res.data.sign
    },
    async getTotalSign() {
      const { data: res } = await this.$http.post('getTotalSign.calc')
      this.signTotal = res.data
    }
  },
  async created() {
    this.getSign()
    this.getTotalSign()
  }
}
</script>

<style lang="less" scoped>
.fade-leave-active {
  transition: all 0.3s ease;
}

p {
  margin-bottom: 5px;
}

.qd-all-day {
  color: #09c;
}

.qd-all-day {
  padding-top: 10px;
}

.f16 {
  font-size: 16px;
}

.f10 {
  font-size: 10px;
}

.acenter {
  text-align: center;
}

.qd-date-child {
  border: 1px solid #b4b4b4;
  background: #fff;
  position: absolute;
  border-top: none;
  top: 110%;
  transform: translateX(-10.8%);
  font-size: 14px;
  width: 358px;
  color: #969696;
}

.signClander {
  position: relative;
  right: 3.3%;
}

.qd-date-child:before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%);
  display: inline-block;
  border-bottom: 8px solid #fff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.qd-date-box {
  color: #5a5a5a;
  height: 500px;
}

.sec-qiandao {
  position: relative;
  height: 79px;
  width: 279px;
  border: 1.9px solid #096;
  font-size: 24px;
  line-height: 79px;
  border-radius: 5px;
}

.sec-qiandaole {
  position: relative;
  height: 79px;
  width: 279px;
  border: 1.9px solid #5a5a5a;
  font-size: 24px;
  line-height: 79px;
  border-radius: 5px;
}

.qd-number {
  color: #5a5a5a;
}

.sec-qiandao .sec-checkin {
  position: relative;
  color: #fff;
  background: #096;
}

.qiandao-num {
  background: #fff;
  color: #096;
}

.f14 {
  font-size: 14px;
}

.qiandao-num {
  position: absolute;
  width: 50%;
  height: 63px;
  padding-top: 16px;
  border-radius: 0 5px 5px 0;
  line-height: 1.8;
  right: 0;
  top: 0;
  text-indent: 0;
  text-align: center;
}

.sec-checkin {
  display: inline-block;
  text-align: center;
  width: 50%;
  height: 79px;
  margin-bottom: 100px;
  border-radius: 3px 0 0 3px;
}

.sec-checkined {
  display: inline-block;
  text-align: center;
  width: 50%;
  height: 79px;
  position: relative;
  color: #fff;
  background: #969696;
  border-radius: 3px 0 0 3px;
}
</style>
